import ChartTitle from '@/components/Visual/chartTitle';
import { echartsResize } from '@/utils/echartsResize';
import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';
import './index.less';
import type { WeekMemberItem } from '../types';
function DayPlusMemberAdd(props: { weekMember: WeekMemberItem[] }) {
  let charEle;
  const { weekMember } = props;
  const chartRef: any = useRef(null); //拿到eCharts容器
  const timeData: string[] = [];
  const barData: number[] = [];
  if (weekMember.length) {
    weekMember.forEach((item) => {
      timeData.push(item.recordDay);
      barData.push(item.wechatRegister);
    });
  }
  const max = Math.max(...barData);
  // const barData = [60, 42, 78, 60, 75, 76];
  const blockData: any[] = [];
  const height = parseInt(String(max / 30));
  barData.forEach(() => {
    blockData.push(height);
  });
  const MyCubeRect1 = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
      width: 200, // 长方体宽
      zWidth: 8, // 阴影折角宽
      zHeight: 4, //阴影折角高
    },
    buildPath: function (ctx, shape) {
      const api = shape.api;
      const xAxisPoint = api.coord([shape.xValue, 0]);
      const p0 = [shape.x, shape.y];
      const p1 = [shape.x - shape.width / timeData.length, shape.y];
      const p4 = [shape.x + shape.width / timeData.length, shape.y];
      const p2 = [xAxisPoint[0] - shape.width / timeData.length, xAxisPoint[1]];
      const p3 = [xAxisPoint[0] + shape.width / timeData.length, xAxisPoint[1]];

      ctx.moveTo(p0[0], p0[1]); //0
      ctx.lineTo(p1[0], p1[1]); //1
      ctx.lineTo(p2[0], p2[1]); //2
      ctx.lineTo(p3[0], p3[1]); //3
      ctx.lineTo(p4[0], p4[1]); //4
      ctx.lineTo(p0[0], p0[1]); //0
      ctx.closePath();
    },
  });
  echarts.graphic.registerShape('MyCubeRect1', MyCubeRect1);

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(255,255,255,0.1)',
      axisPointer: {
        type: 'shadow',
        label: {
          // color: 'fff',
          show: true,
          backgroundColor: '#159AFF',
        },
      },
      textStyle: {
        color: '#159AFF',
      },
    },
    grid: {
      top: '15%',
      right: '10%',
      left: '10%',
      bottom: '10%',
    },
    legend: {
      textStyle: {
        color: '#D0DEEE',
      },
      right: '0%',
      top: '0%',
      itemWidth: 8,
      itemHeight: 8,
      data: [
        {
          name: '人员数量',
          icon: 'rect',
          textStyle: {
            color: '#D0DEEE',
          },
          itemStyle: {
            width: 8,
            height: 8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#159AFF' },
              { offset: 0.3, color: 'rgba(0, 58, 255, 0.0001)' },
              { offset: 1, color: '#159AFF' },
            ]),
            // shadowColor: '#159AFF',
            // shadowOffsetY: 2,
          },
        },
      ],
    },
    xAxis: {
      type: 'category',
      show: true, //是否显示X轴
      // name: '',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#B4B4B4',
        },
      },
      axisLabel: {
        interval: 0, //标签间隔
        //X轴文本描述描述条目，可以是数据中的任何标记或文本，也
      },
      // interval: 1,
      interval: 3,
      axisTick: {
        show: false,
        interval: 0, //刻度线显示间隔
      },
      // splitArea: {
      //   show: false,
      //   interval: 1,
      //   areaStyle: {
      //     color: '#6C8097',
      //     opacity: 0.1,
      //   },
      // },
      data: timeData,
    },
    yAxis: [
      {
        type: 'value',
        name: '人数',
        min: 0,
        max: max + 1,
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,0.1)',
            type: 'dashed',
          },
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#B4B4B4',
          },
        },
        splitNumber: 5,
        axisLabel: {
          formatter: '{value}',
        },
      },
      {
        show: false,
        max: 2000,
        splitLine: { show: false },
        // axisLine: {
        //   lineStyle: {
        //     color: '#B4B4B4',
        //   },
        // },
        axisLabel: {
          formatter: '{value}',
        },
      },
    ],
    series: [
      {
        name: '人员数量',
        type: 'bar',
        stack: 'orderMoney',
        // xAxisIndex: 0,
        // yAxisIndex: 0,
        barWidth: 16,
        barGap: '20%',
        // barCategoryGap: '10%',
        tooltip: {
          show: true,
        },
        label: {
          show: true,
          position: 'top',
          fontSize: 14,
          distance: 8,
          textStyle: {
            color: '#fff',
          },
          formatter: '{@score}',
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(0, 58, 255, 0.0001)' },
              { offset: 1, color: '#159AFF' },
            ]),
          },
        },
        zlevel: 10,
        data: barData,
      },
      {
        name: '人员数量',
        type: 'bar',
        stack: 'orderMoney',
        barWidth: '50%',
        // barGap: '-150%',
        itemStyle: {
          normal: {
            color: '#159AFF',
          },
        },
        tooltip: {
          show: false,
        },
        // data: barData,
        data: blockData,
      },
      {
        name: '',
        type: 'custom',
        tooltip: {
          show: false,
        },
        renderItem: (params: any, api: any) => {
          const location = api.coord([api.value(0), api.value(1)]);
          return {
            type: 'group',
            children: [
              {
                type: 'MyCubeRect1',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                },
                style: {
                  fill: '#333', // 0% 处的颜色
                  opacity: 0.3, //透明度,
                }, //api.style() 继承原本样式
              },
            ],
          };
        },
        data: [max + 1, max + 1, max + 1, max + 1, max + 1, max + 1, max + 1],
      },
      // {
      //   type: 'bar',
      //   barWidth: '50%',
      //   // xAxisIndex: 0,
      //   // yAxisIndex: 1,
      //   barGap: '-175%',
      //   barCategoryGap: '20%',
      //   tooltip: {
      //     show: false,
      //   },
      //   data: [
      //     max + 1,
      //     max + 1,
      //     max + 1,
      //     max + 1,
      //     max + 1,
      //     max + 1,
      //     max + 1,
      //     max + 1,
      //     max + 1,
      //     max + 1,
      //     max + 1,
      //     max + 1,
      //     max + 1,
      //   ],
      //   itemStyle: {
      //     normal: {
      //       color: '#6C8097',
      //       opacity: 0.1,
      //     },
      //   },
      //   // zlevel: 2,
      // },
    ],
  };
  useEffect(() => {
    const initChart = () => {
      const char = document.getElementById('plusMember');
      if (char) {
        // eslint-disable-next-line react-hooks/exhaustive-deps
        charEle = echarts.init(char);
        chartRef.current = charEle;
        charEle.setOption(option as any);
        echartsResize(charEle);
      }
    };
    initChart();
  }, []);

  useEffect(() => {
    if (chartRef.current) {
      chartRef.current.setOption(option as any);
    }
  }, [option, props]);

  return (
    <div className="day_plusMember_add">
      <div className="title">
        <ChartTitle title="日会员注册新增" />
        <img className="polyline" src="/visual/tabTitlePolyline.svg" alt="" />
        <img className="diamond" src="/visual/titleRectangle.svg" alt="" />
      </div>
      <div id="plusMember" className="chart" ref={chartRef} />
    </div>
  );
}

export default DayPlusMemberAdd;
